<template>
  <div id="login">
    <div class="login-top-header">
      <div class="login-top-header-left">
        <img src="../../assets/login/logo3.svg" alt="" />
      </div>
      <div class="login-top-btns">
        <router-link tag="a" to="/cooperate" class="cooperatebtn">
          <el-button type="primary">申请入驻</el-button>
        </router-link>
         <a href="https://qiye.wanjunjiakao.com/norm/万骏驾考使用手册.pdf" target="_blank">
           <el-button type="success" class="helpbtn">帮助手册</el-button>
          </a>
      </div>
    </div>
    <!-- 登录区域 -->
    <div class="login-content">
      <!-- banner图区域 -->
      <div class="login-content-left">
        <!-- 大标题 -->
        <div class="login-title">
          <h3>专注学员推广</h3>
          <span></span>
          <h3>致力驾校运营</h3>
        </div>
        <div class="login-main">
          <div class="left-img">
            <img
              src="https://oss.juchehulian.com/_platform/normal/YgXs5v1610531807.png"
              alt=""
            />
          </div>
          <div class="right-icon">
            <div class="right-list">
              <ul>
                <li>
                  <img
                    src="https://oss.juchehulian.com/_platform/normal/lobJxU1610506758.svg"
                    alt=""
                  />
                  <span>专注运营</span>
                </li>
                <li>
                  <img
                    src="https://oss.juchehulian.com/_platform/normal/LPACEd1610506802.svg"
                    alt=""
                  />
                  <span>渠道合作</span>
                </li>
                <li>
                  <img
                    src="https://oss.juchehulian.com/_platform/normal/ambozq1619056549.svg"
                    alt=""
                  />

                  <span>基础服务</span>
                </li>
                <li>
                  <img
                    src="https://oss.juchehulian.com/_platform/normal/x25ruP1610506868.svg"
                    alt=""
                  />
                  <span>数据服务</span>
                </li>
                <li>
                  <img
                    src="https://oss.juchehulian.com/_platform/normal/Blrf3e1610506838.svg"
                    alt=""
                  />
                  <span>开放平台</span>
                </li>
                <li>
                  <img
                    src=" https://oss.juchehulian.com/_platform/normal/xZGwDu1610506820.svg"
                    alt=""
                  />
                  <span>独立品牌</span>
                </li>

              </ul>
            </div>
            <router-link tag="div" to="/cooperate" class="enterBtn">
              <span>申请入驻</span>
              <img
                src="https://oss.juchehulian.com/_platform/normal/2kulju1610507313.svg"
                alt=""
              />
            </router-link>
          </div>
        </div>
        <!-- 背景图 -->
      </div>

      <div class="login-content-right">
        <div class="login-content-box">
          <el-tabs v-model="activeName" @tab-click="handleClick" stretch>

            <el-tab-pane
              label="密码登录"
              name="password"
              :class="{ activeon: loginType == '0' ? 'activeon' : '' }"
            >

              <div class="passwordlogin">
                <el-form :model="form" ref="form" :rules="rules">
                  <el-form-item prop="tel">
                    <el-input
                      v-focus
                      v-model="form.tel"
                      placeholder="请输入手机号"
                      size="large"
                      class="usernameitem"
                    ></el-input>
                  </el-form-item>
                  <i
                    class="iconfont passwordicon"
                    @click="showpassword"
                    v-if="isshowpassword"
                  >
                    &#xe61b;
                  </i>
                  <i class="iconfont passwordicon" @click="showpassword" v-else>
                    &#xe660;
                  </i>
                  <el-form-item prop="password">
                    <el-input
                      :type="passwordType"
                      v-model="form.password"
                      placeholder="请输入密码"
                      size="large"
                      class="passworditem"
                      @keyup.enter.native="handleLogin"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane label="验证码登录" name="msgcode">
              <div class="codelogin">
                <el-form
                  :model="codeform"
                  ref="codeforms"
                  :rules="codeformrules"
                >
                  <el-form-item prop="tel">
                    <el-input
                      v-model="codeform.tel"
                      placeholder="请输入手机号"
                      @input="changephone"
                      size="large"
                      class="usernameitem"
                    ></el-input>
                  </el-form-item>
                  <el-form-item prop="smsCode">
                    <div class="sendcode">
                      <el-input
                        v-model="codeform.smsCode"
                        style="margin-right: 10px"
                        :placeholder="placeholderTetx"
                        size="large"
                        class="usernameitem"
                      ></el-input>
                      <el-button
                        type="primary"
                        size="large"
                        :disabled="isdisable"
                        @click="sendCode"
                      >
                        {{ sendCodetext }}{{ senCodetime }}
                      </el-button>
                    </div>
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
            <!-- 登录按钮 -->
            <el-button
              type="primary"
              class="gologin"
              @click="handleLogin"
              style="width: 100%"
            >
              登录
            </el-button>
            <div class="login-bottom-area">
              <!-- 记住账号 -->
              <el-checkbox v-model="issavename" @change="saveuname">
                记住账号
              </el-checkbox>
              <span @click="forgetpassword">忘记密码？</span>
            </div>
          </el-tabs>
        </div>
      </div>
    </div>
    <!-- 登录页脚 -->
    <div class="login-footer">
      <div class="login-footer-content">
        <span class="companyname">Copyright © 四川万骏机动车驾驶培训有限公司 |</span>
        <a href="http://beian.miit.gov.cn/" target="_blank" class="bncode">
          蜀ICP备2021002453号
        </a>
      </div>
    </div>

    <!-- 忘记密码组件 -->
    <passwordforget
      @forgetpasswordok="forgetpasswordok"
      :ishowpassword="isshowpasswords"
      @closepassword="closepassword"
    ></passwordforget>
  </div>
</template>

<script>
import { isPassword } from '@/utils/validate'
import { isPhone } from '@/utils/validate'

//api接口
import { getCode } from '@/api/common'
// 忘记密码组件
import passwordforget from './component/passwordforget'
export default {
  name: 'Login',
  directives: {
    focus: {
      inserted(el) {
        el.querySelector('input').focus()
      },
    },
  },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (!isPassword(value)) {
        callback(new Error('密码不能少于6位'))
      } else {
        callback()
      }
    }
    return {
       placeholderTetx:'请输入验证码',
      //登录的方式
      loginType: 0,
      //验证码计时器
      secodeTimer: null,
      //是否禁用发送验证码
      isdisable: true,
      //验证码倒计时
      senCodetime: '',
      sendCodetext: '发送验证码',
      // 短信验证码表单
      codeform: {
        tel: '',
        smsCode: '',
        type: 'sms',
        //sms短信验证
      smsSign:'',
      },

      //是否显示忘记密码框
      isshowpasswords: false,
      //是否记住密码
      issavename: false,
      //是否显示密码
      isshowpassword: true,
      activeName: 'password',
      //登录的方式
      loginType: '0',
      nodeEnv: process.env.NODE_ENV,
      title: this.$baseTitle,
      //密码登录表单数据
      form: {
        tel: '',
        password: '',
        type: 'normal',
      },
      rules: {
        tel: [
          {
            required: true,
            message: '请输入用户名/手机号',
            trigger: 'change',
          },
        ],
        password: [
          {
            required: true,
            trigger: 'change',
            validator: validatePassword,
          },
        ],
      },
      //短信验证
      codeformrules: {
        tel: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'change',
          },
          {
            pattern: /^1\d{10}$/,
            message: '手机号有误',
            trigger: 'change',
          },
        ],
        smsCode: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'change',
          },
        ],
      },
      //密码输入框的类型 默认值password
      passwordType: 'password',
      redirect: undefined,
    }
  },
  watch: {
    $route: {
      handler(route) {
        this.redirect = (route.query && route.query.redirect) || '/'
      },
      immediate: true,
    },
  },
  created() {
    document.body.style.overflow = 'hidden'
  },
  beforeDestroy() {
    document.body.style.overflow = 'auto'
  },
  methods: {
    forgetpasswordok() {
      this.isshowpasswords = false
    },
    //监听手机号输入事件
    changephone(val) {
      let result = isPhone(val)
      //手机号正确 就取消禁用
      if (result) {
        this.isdisable = false
      }
    },
    //发送验证码
    async sendCode() {
      //参数.0
      let params = {
        tel: this.codeform.tel,
      }
      //发起请求
      let data = await getCode(params)
      if (data.code == '0000') {
        this.codeform.smsSign = data.data.smsSign
     this.placeholderTetx = '请输入编号为'+this.codeform.smsSign+'验证码'
        //清除定时器
        clearInterval(this.secodeTimer)
        //更改按钮中的文字
        this.sendCodetext = '已发送'
        //验证码计时器60秒
        this.senCodetime = 60
        //禁言按钮
        this.isdisable = true
        //定时器每隔一秒减1
        this.secodeTimer = setInterval(() => {
          if (this.senCodetime == 0) {
            this.senCodetime = ''
            this.sendCodetext = '发送验证码'
            this.placeholderTetx = '请输入验证码'
            this.isdisable = false
            return
          } else {
            this.senCodetime--
          }
        }, 1000)
      }
    },
    //关闭密码框
    closepassword() {
      this.isshowpasswords = false
    },
    //用户点击忘记密码
    forgetpassword() {
      this.isshowpasswords = true
    },
    //是否选择记住账号
    saveuname(val) {
      //如果用户选择了 保存账号 并且 输入了 用户名 那么就把 用户名存储在本地 localStorage
      if (val && (this.form.tel || this.codeform.tel)) {
        window.localStorage.setItem(
          'saveUsername',
          this.form.tel || this.codeform.tel
        )
      } else {
        //清空本地存储测用户名
        window.localStorage.removeItem('saveUsername')
      }
    },
    //点击眼睛图标是否显示密码
    showpassword() {
      this.isshowpassword = !this.isshowpassword
      if (this.isshowpassword) {
        this.passwordType = 'password'
      } else {
        this.passwordType = 'text'
      }
    },
    //登录方式切换
    handleClick(e) {
      this.loginType = Number(e.index)
    },
    //点击眼睛图标是否显示密码
    handlePassword() {
      this.passwordType === 'password'
        ? (this.passwordType = '')
        : (this.passwordType = 'password')
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    //登录提交
    handleLogin() {
      if (this.loginType == 0) {
        //密码登录
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$store
              .dispatch('user/login', this.form)
              .then(() => {
                const routerPath =
                  this.redirect === '/404' || this.redirect === '/401'
                    ? '/'
                    : this.redirect
                this.$router.push(routerPath).catch(() => {})
              })
              .catch(() => {})
          } else {
            return false
          }
        })
      } else {
        //验证码登录
        this.$refs['codeforms'].validate((valid) => {
          if (!valid) return
          this.$store
            .dispatch('user/login', this.codeform)
            .then(() => {
              const routerPath =
                this.redirect === '/404' || this.redirect === '/401'
                  ? '/'
                  : this.redirect
              this.$router.push(routerPath).catch(() => {})
            })
            .catch(() => {})
        })
      }
    },
  },
  components: {
    passwordforget,
  },
  mounted() {
    //判断是否有保存的用户名
    //获取本地的用户名
    let localsaveUsername = window.localStorage.getItem('saveUsername')
    if (localsaveUsername) {
      //单选框设置为true
      this.issavename = true
      //输入框的账号为本地的存储用户
      this.form.tel = localsaveUsername
    }
  },
}
</script>

<style lang="scss" scoped>
#login {
  width: 100%;
  height: 100vh;
  background: url('https://oss.juchehulian.com/_platform/normal/t8Zn4P1610504495.png')
    no-repeat center center;
  background-size: 100%;
  .login-top-header {
    padding: 0 30px;
    padding-top: 19px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .login-top-header-left {
      img {
        width: 200px;
        cursor: pointer;
      }
    }
    .login-top-btns {
      span {
        margin-right: 20px;
        font-size: 12px;
        color: #606266;
      }
    }
  }
  .login-content {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    .login-content-left {
      width: 878px;
      height: 750px;
      margin-right: 20px;
      .login-title {
        width: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 160px;
        h3 {
          font-size: 38px;
          font-weight: 300;
          margin: 0;
          padding: 0;
          color: #333;
        }
        span {
          display: block;
          width: 6px;
          height: 6px;
          background: #333;
          margin: 0 14px;
          border-radius: 50%;
        }
      }
      .login-main {
        display: flex;
        margin-top: 30px;
        .left-img {
          width: 548px;
          height: 422px;

          img {
            width: 100%;
          }
        }
        .right-icon {
          width: 250px;
          display: flex;
          flex-direction: column;

          .right-list {
            ul {
              list-style: none;
              padding: 0;
              margin: 0;
              display: flex;
              margin-top: 50px;
              flex-wrap: wrap;
              li {
                width: 50%;
                display: flex;
                align-items: center;
                margin: 26px 0;
                justify-content: center;
                span {
                  font-size: 17px;
                  margin-left: 10px;
                }
              }
            }
          }
          .enterBtn {
            border: 1px solid #7086f2;
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
            margin-top: 46px;
            cursor: pointer;
            span {
              font-size: 18px;
              color: #4c68ef;
            }
          }
        }
      }
    }
    .login-content-right {
      margin-top: 10px;
      width: 400px;
      height: 420px;
      background: #fff;
      box-shadow: 0 6px 30px 0 rgba(171, 193, 227, 0.3);
      border-radius: 12px;
      padding: 50px 50px 50px 40px;
      box-sizing: border-box;
      .passwordlogin {
        position: relative;
        margin-top: 30px;
        .gologin {
          width: 100%;
          height: 40px;
          margin-top: 15px;
        }
      }
      .codelogin {
        margin-top: 30px;
      }
    }
  }
  .login-footer {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 50%;
    transform: translate(-50%, 0);
    padding-bottom: 10px;
    margin-bottom: 5px;
    .login-footer-content {
      display: flex;
      align-items: center;
      color: rgba(31, 38, 62, 0.5);
      .companyname {
        margin-right: 5px;
      }
      .bncode {
        margin-left: 5px;
      }
      a {
        color: rgba(31, 38, 62, 0.5);
        display: flex;
        align-items: center;
      }
    }
  }
  .activeon {
    font-weight: bold !important;
  }
  .login-bottom-area {
    display: flex;
    justify-content: space-between;
    margin-top: 22px;
    span {
      cursor: pointer;
      color: #333;
      &:hover {
        color: #4c68ef;
      }
    }
  }
  .passwordicon {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 71px;
    z-index: 99;
    color: #999;
    font-weight: normal !important;
  }
  .phoneCodebox {
    display: flex;
  }
  .sendcode {
    display: flex;
  }
}
.cooperatebtn{
  margin-right: 10px;
}
.helpbtn{
  background-color: #42b3ff !important;
  border: 1px solid #42b3ff !important;
}

</style>
